<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    ul,
    li {
        list-style: none;
        padding: 0;
    }

    li {
        position: relative;
        line-height: 30px;
        padding-left: 20px
    }

    em {
        position: absolute;
        top: 7px;
        left: 0;
        width: 16px;
        height: 16px;
        background: #E94709;
        cursor: pointer;
        background-size: 16px 16px;
    }
    em.open{
        background: #E94709;
        background-size: 16px 16px;
    }
</style>

<body>
<div id="app"></div>
<script type="text/javascript" src="{$_W['siteroot']}app/resource/js/lib/jquery-1.11.1.min.js?v=201801071"></script>
<script>
    $(function () {
        var data=eval('{php echo json_encode($arr);}');
        console.log(data);
        var menu = '';
        menuFn(0, data);
        $("#app").append(menu);

        function menuFn(id, data) {
            var local='http://test.18bang.cn/attachment/';
            if (data.length > 0) {
                if(id==0){
                    menu += "<ul>";
                }else {
                    menu += "<ul style='display:none;'>";
                }
                for (var i = 0; i < data.length; i++) {
                    if (data[i].parentid == id) {
                        menu += "<li>";
                        if(data[i].child){
                            if (data[i].file_path!=""){
                                var path=data[i].file_path;
                                menu += '<em></em><span>' + data[i].name +"</span><a href='"+local+path+"'>查看视频</a>";

                            } else{
                                menu += '<em></em><span>' + data[i].name + "</span>";
                            }
                            menuFn(data[i].id, data[i].child);  //递归
                        }else{
                            if (data[i].file_path!=""){
                                var path=data[i].file_path;
                                menu += '<em></em><span>' + data[i].name +"</span><a href='"+local+path+"'>查看视频</a>";

                            } else{
                                menu += '<em></em><span>' + data[i].name + "</span>";
                            }
                        }
                        menu += "</li>";

                    }
                }
                menu += "</ul>";
                return menu;
            }
        }

        function fn() {
            var ull = $($(this).parent().children("ul")[0]);
            if (ull.length > 0) {
                ull.toggle();
                $(this).toggleClass("open");
            }
        }
        $("#app").delegate("span", "click", fn);
        $("#app").delegate("em", "click", fn);
    })
</script>
</body>

</html>
